.app{
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn60{
	width: 124px;
	height: 50px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s linear;
}
.btn60:after{
	content: attr(data-text);
	position: relative;
}
.border-tb-60:before{
	content: '';
	width: 0;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 0;
	left: 0;
}
.border-tb-60:after{
	content: '';
	width: 0;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 47px;
	right: 0;
}
.border-lr-60:before{
	content: '';
	width: 3px;
	height: 0;
	background-color: black;
	position: absolute;
	bottom: 0;
	left: 0;
}
.border-lr-60:after{
	content: '';
	width: 3px;
	height: 0;
	background-color: black;
	position: absolute;
	top: 0;
	left: 121px;
}
.btn60:hover{
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn60:hover .border-tb-60:before,.btn60:hover .border-tb-60:after{
	animation: eff60 .3s linear forwards;
}
.btn60:hover .border-lr-60:before,.btn60:hover .border-lr-60:after{
	animation: eff601 .3s linear forwards;
}
@keyframes eff60{
	to{
		width: 100%;
	}
}
@keyframes eff601{
	to{
		height: 100%;
	}
}










